import React, { useState } from "react";

interface VoiceAssistantButtonProps {
    onOpen: () => void;
}

const VoiceAssistantButton: React.FC<VoiceAssistantButtonProps> = ({
    onOpen,
}) => {
    const [isPulsing, setIsPulsing] = useState(false);

    const handleClick = () => {
        setIsPulsing(true);
        onOpen();
        // 脉冲动画结束后重置状态
        setTimeout(() => setIsPulsing(false), 1000);
    };

    return (
        <button
            onClick={handleClick}
            style={{
                position: "fixed",
                bottom: "140px", // 在AI聊天按钮上方
                left: "50%",
                transform: "translateX(-50%)",
                width: "80px",
                height: "80px",
                borderRadius: "50%",
                background: "linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)",
                border: "none",
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: "0 8px 32px rgba(255, 107, 107, 0.4)",
                transition: "all 0.3s ease",
                zIndex: 100,
                animation: isPulsing ? "voice-pulse 1s ease-in-out" : "none",
            }}
            onMouseEnter={(e) => {
                e.currentTarget.style.transform = "translateX(-50%) scale(1.1)";
                e.currentTarget.style.boxShadow =
                    "0 12px 40px rgba(255, 107, 107, 0.6)";
            }}
            onMouseLeave={(e) => {
                e.currentTarget.style.transform = "translateX(-50%) scale(1)";
                e.currentTarget.style.boxShadow =
                    "0 8px 32px rgba(255, 107, 107, 0.4)";
            }}
        >
            <span
                role="img"
                aria-label="昆昆语音助手"
                style={{
                    fontSize: "32px",
                    color: "#fff",
                    filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
                }}
            >
                🎤
            </span>
            <style>{`
                @keyframes voice-pulse {
                    0% { transform: translateX(-50%) scale(1); }
                    50% { transform: translateX(-50%) scale(1.2); }
                    100% { transform: translateX(-50%) scale(1); }
                }
            `}</style>
        </button>
    );
};

export default VoiceAssistantButton;
